<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件满足了可能出现的表单信息补充，编辑等实际逻辑的功能，内置了字数校验等。
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<fu-textarea v-model="textareaValue1" placeholder="请输入内容"></fu-textarea>
		</fu-section>
		
		<fu-section title="字数统计" customClass="fu-m-t-20" type="line">
			<fu-textarea v-model="textareaValue2" placeholder="请输入内容" count></fu-textarea>
		</fu-section>
		
		<fu-section title="自动增高" customClass="fu-m-t-20" type="line">
			<fu-textarea v-model="textareaValue3" placeholder="请输入内容" autoHeight></fu-textarea>
		</fu-section>
		
		<fu-section title="禁用状态" customClass="fu-m-t-20" type="line">
			<fu-textarea v-model="textareaValue4" placeholder="文本域已被禁用" disabled count></fu-textarea>
		</fu-section>
		
		<fu-section title="下划线模式" customClass="fu-m-t-20" type="line">
			<fu-textarea v-model="textareaValue5" placeholder="请输入内容" border="bottom"></fu-textarea>
		</fu-section>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	// data数据
	let textareaValue1 = ref('');
	let textareaValue2 = ref('字数统计');
	let textareaValue3 = ref('');
	let textareaValue4 = ref('');
	let textareaValue5 = ref('');
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>